<template>
  <div class="dropdown" ref="dropdownRef">
    <a href="#" class="btn btn-outline-light my-2 dropdown-toggle" @click.prevent="isOpen">{{ title }}</a>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink" :style="{ display: 'block' }" v-if="isShow">
      <!-- <li><a class="dropdown-item" href="#">新建文章</a></li>
    <li><a class="dropdown-item" href="#">编辑资料</a></li> -->
      <slot></slot>
    </ul>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import useClickOutside from '../hooks/useClickOutside';

interface Props {
  title: string
}
let dropdownRef = ref<null | HTMLElement>(null)
let isShow = ref(false)
// 判断是否打开
const isOpen = () => {
  isShow.value = !isShow.value
}
let isClickOut = useClickOutside(dropdownRef)

watch(isClickOut, () => {
  if (isShow.value && isClickOut.value) {
    isShow.value = false
  }
})

let { title } = defineProps<Props>()
</script>